<template>
  <div>
    <div class="left" @click="clickImg()">
      <img src="../../assets/img/common/fh.png" />
    </div>
    <div class="login-container">
      <el-form
        :model="ruleForm2"
        :rules="rules2"
        status-icon
        ref="ruleForm2"
        label-position="left"
        label-width="0px"
        class="demo-ruleForm login-page"
      >
        <h3 class="title">注册平台</h3>
        <el-form-item prop="username">
          <el-input
            type="text"
            v-model="username"
            auto-complete="off"
            placeholder="用户名"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="password"
            auto-complete="off"
            placeholder="密码"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="password"
            auto-complete="off"
            placeholder="再次确认密码"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button
            type="primary"
            style="width: 150px"
            @click="qd"
            :loading="logining"
            >确定</el-button
          >
          <el-button
            type="primary"
            style="width: 150px"
            @click="click"
            :loading="logining"
            class="zc"
            >取消</el-button
          >
        </el-form-item>
        <el-form-item>
          <span @click="click">已有账号返回登录</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      logining: false,
      ruleForm2: {},
      username:'',
      password:'',
      rules2: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        checkPass: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      checked: true,
    };
  },
  methods: {
    qd() {
      if (this.username == "" || this.password == "") {
        this.$alert("请输入用户名或者密码", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      } else {
        this.$alert("注册成功", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      }
    },
    handleReset2() {
      this.$refs.ruleForm2.resetFields();
    },
    clickImg() {
      this.$router.push("/home");
    },
    click() {
      this.$router.push("/login");
    },
    forgetpassword() {
      this.$alert("注册成功", "提示", {
        confirmButtonText: "确定",
        type: "warning",
      });
    },
  },
};
</script>

<style scoped>
span {
  padding-left: 20px;
  color: blue;
}
.left img {
  width: 30px;
  height: 30px;
  padding-right: 30px;
  padding-top: 5px;
}
.cz {
  margin-left: 20px;
}
.login-container {
  margin-left: 20%;
  margin-top: 15%;
}
.input {
  width: 350px;
}
h3 {
  padding-left: 140px;
}
label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}
label.el-button.forget {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
}
</style>
